<template>
	<view class="content">
		<image :src="baseInfo.thumb" mode="widthFix"></image>
		<view class="header header-more">
			<view class="horizontal">
				<view class="line"></view>
				<view class="header-title">施工现场</view>
			</view>
			<image class="share-image" src="../../../../static/share.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in constructionList" :key="index">
				<image class="item-image" :src="item.img_url" mode="scaleToFill"></image>
				<view class="item-title">{{ item.tag_name }}</view>
			</view>
		</view>
		<view v-if="isLoadDataComplete" class="btn" hover-class="btn-hover" type="default" size="mini" @click="isShowConfirm = true">预约</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'more',
			baseInfo: {},
			constructionList: [],
			total: 0,
			page: 1,
			limit: 10,
			id: 0,
			isLoadDataComplete: false
		};
	},
	onReachBottom() {
		this.loadNextPage();
	},
	onLoad(e) {
		this.id = e.id;
		this.loadPage(true);
	},
	methods: {
		loadNextPage() {
			if (this.page < this.total / this.limit) {
				this.page++;
				this.loadPage(false);
			} else {
				this.isLoadDataComplete = true;
			}
		},
		loadPage(isFirstLoad) {
			uni.showLoading({
				title: '加载中...'
			});
			setTimeout(
				() => {
					uni.request({
						url: 'https://baiyi.kent.work/api/v1/system/getConstructionDetail',
						method: 'POST',
						data: {
							id: this.id,
							page: this.page,
							limit: this.limit
						},
						success: res => {
							this.baseInfo = res.data.data.baseInfo;
							this.page = res.data.data.list.page;
							this.total = res.data.data.list.total;
							this.constructionList = this.constructionList.concat(res.data.data.list.list);
							uni.setNavigationBarTitle({
								title:this.baseInfo.name
							})
						},
						complete() {
							uni.hideLoading();
						}
					});
				},
				isFirstLoad ? 0 : 400
			);
		}
	}
};
</script>

<style lang="less">
.content {
	display: flex;
	flex-direction: column;

	.header {
		margin: 40rpx 40rpx 0rpx 40rpx;
	}

	.header-title {
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	.share-image {
		width: 32rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		box-sizing: content-box;

		.item {
			margin: 20rpx 40rpx 0rpx 40rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

			.item-image {
				height: 406rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.item-title {
				text-align: center;
				padding: 20rpx 0;
				font-size: 24rpx;
			}

			.title::after {
				content: ' —';
				color: #3d9c36;
			}

			.title::before {
				content: '— ';
				color: #3d9c36;
			}
		}
	}
}
</style>
